<template>
  <div class="system-config-page">
    <el-card shadow="never">
      <template #header>
        <span>系统配置</span>
      </template>

      <el-tabs v-model="activeTab">
        <!-- MQTT配置 -->
        <el-tab-pane label="MQTT配置" name="mqtt">
          <el-form
            :model="config.mqtt"
            label-width="150px"
            disabled
          >
            <el-form-item label="Broker地址">
              <el-input v-model="config.mqtt.brokerHost" />
            </el-form-item>
            <el-form-item label="端口">
              <el-input v-model.number="config.mqtt.brokerPort" />
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="config.mqtt.username" />
            </el-form-item>
            <el-form-item label="保持连接时间">
              <el-input v-model.number="config.mqtt.keepalive">
                <template #append>秒</template>
              </el-input>
            </el-form-item>
          </el-form>
          <el-alert
            type="info"
            :closable="false"
            show-icon
          >
            <template #title>
              MQTT配置需要修改环境变量后重启服务器才能生效
            </template>
          </el-alert>
        </el-tab-pane>

        <!-- 心跳配置 -->
        <el-tab-pane label="心跳配置" name="heartbeat">
          <el-form
            :model="config.heartbeat"
            label-width="150px"
            disabled
          >
            <el-form-item label="心跳间隔">
              <el-input v-model.number="config.heartbeat.interval">
                <template #append>秒</template>
              </el-input>
            </el-form-item>
            <el-form-item label="超时时间">
              <el-input v-model.number="config.heartbeat.timeout">
                <template #append>秒</template>
              </el-input>
            </el-form-item>
            <el-form-item label="超时倍数">
              <el-input v-model.number="config.heartbeat.timeoutMultiplier" />
            </el-form-item>
            <el-form-item label="超时偏移">
              <el-input v-model.number="config.heartbeat.timeoutOffset">
                <template #append>秒</template>
              </el-input>
            </el-form-item>
          </el-form>
          <el-alert
            type="info"
            :closable="false"
            show-icon
          >
            <template #title>
              超时时间 = 心跳间隔 × 超时倍数 + 超时偏移
            </template>
          </el-alert>
          <el-alert
            type="warning"
            :closable="false"
            show-icon
            style="margin-top: 10px"
          >
            <template #title>
              心跳配置需要修改环境变量后重启服务器才能生效
            </template>
          </el-alert>
        </el-tab-pane>

        <!-- 协议说明 -->
        <el-tab-pane label="协议说明" name="protocol">
          <div class="protocol-doc">
            <h3>设备接入说明</h3>
            
            <el-divider />
            
            <h4>1. 连接参数</h4>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="服务器地址">
                {{ config.mqtt.brokerHost }}
              </el-descriptions-item>
              <el-descriptions-item label="端口">
                {{ config.mqtt.brokerPort }}
              </el-descriptions-item>
              <el-descriptions-item label="协议">
                MQTT 3.1.1
              </el-descriptions-item>
              <el-descriptions-item label="ClientID格式">
                device_&#123;deviceId&#125;
              </el-descriptions-item>
              <el-descriptions-item label="Username">
                {{ config.mqtt.username }}
              </el-descriptions-item>
              <el-descriptions-item label="Keep Alive">
                {{ config.mqtt.keepalive }} 秒
              </el-descriptions-item>
            </el-descriptions>

            <h4 style="margin-top: 20px">2. 心跳主题</h4>
            <el-alert
              type="info"
              :closable="false"
            >
              <template #default>
                <div><strong>主题格式：</strong> /iot/&#123;deviceId&#125;/heartbeat</div>
                <div><strong>方向：</strong> 设备 → 平台</div>
                <div><strong>QoS：</strong> 1</div>
              </template>
            </el-alert>

            <h4 style="margin-top: 20px">3. 心跳消息格式</h4>
            <el-alert
              type="success"
              :closable="false"
            >
              <template #default>
                <pre>{{ heartbeatExample }}</pre>
              </template>
            </el-alert>

            <h4 style="margin-top: 20px">4. 心跳机制</h4>
            <ul>
              <li>设备连接成功后立即发送第一个心跳</li>
              <li>之后按照心跳间隔（{{ config.heartbeat.interval }}秒）定时发送</li>
              <li>平台在 {{ config.heartbeat.timeout }}秒 内未收到心跳将标记设备为离线</li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getConfig } from '@/api/config'

const activeTab = ref('mqtt')
const config = ref({
  mqtt: {
    brokerHost: '',
    brokerPort: 1883,
    username: '',
    keepalive: 60
  },
  heartbeat: {
    interval: 60,
    timeout: 150,
    timeoutMultiplier: 2,
    timeoutOffset: 30
  }
})

const heartbeatExample = `{
  "status": "online"
}`

// 获取配置
const fetchConfig = async () => {
  try {
    const res = await getConfig()
    config.value = res.data
  } catch (error) {
    console.error('获取配置失败:', error)
  }
}

onMounted(() => {
  fetchConfig()
})
</script>

<style scoped>
.system-config-page {
  height: 100%;
}

.protocol-doc {
  padding: 20px;
}

.protocol-doc h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.protocol-doc h4 {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.protocol-doc ul {
  padding-left: 20px;
}

.protocol-doc li {
  margin: 10px 0;
  line-height: 1.6;
}

.protocol-doc pre {
  margin: 0;
  font-family: 'Courier New', monospace;
}
</style>

